import React from 'react';
import {
  Box,
  Typography,
  ImageList,
  ImageListItem,
  Paper,
  Grid,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';

interface GameOverviewProps {
  game: {
    description: string;
    features: string[];
    screenshots: string[];
    systemRequirements: {
      minimum: {
        os: string;
        processor: string;
        memory: string;
        graphics: string;
        storage: string;
      };
      recommended: {
        os: string;
        processor: string;
        memory: string;
        graphics: string;
        storage: string;
      };
    };
  };
}

const GameOverview: React.FC<GameOverviewProps> = ({ game }) => {
  return (
    <Box sx={{ py: 4 }}>
      {/* 游戏描述 */}
      <Typography variant="body1" paragraph>
        {game.description}
      </Typography>

      {/* 游戏特色 */}
      <Typography variant="h5" gutterBottom sx={{ mt: 4 }}>
        游戏特色
      </Typography>
      <List>
        {game.features.map((feature, index) => (
          <ListItem key={index}>
            <ListItemIcon>
              <CheckCircleOutlineIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary={feature} />
          </ListItem>
        ))}
      </List>

      {/* 游戏截图 */}
      <Typography variant="h5" gutterBottom sx={{ mt: 4 }}>
        游戏截图
      </Typography>
      <ImageList
        sx={{
          gridAutoFlow: "column",
          gridTemplateColumns: "repeat(auto-fill,minmax(300px,1fr)) !important",
          gridAutoColumns: "minmax(300px, 1fr)",
          mb: 4,
          gap: 2,
        }}
      >
        {game.screenshots.map((screenshot, index) => (
          <ImageListItem key={index}>
            <img
              src={screenshot}
              alt={`Screenshot ${index + 1}`}
              loading="lazy"
              style={{ borderRadius: 8 }}
            />
          </ImageListItem>
        ))}
      </ImageList>

      {/* 系统需求 */}
      <Typography variant="h5" gutterBottom sx={{ mt: 4 }}>
        系统需求
      </Typography>
      <Grid container spacing={2}>
        <Grid item xs={12} md={6}>
          <Paper sx={{ p: 2 }}>
            <Typography variant="h6" gutterBottom>
              最低配置
            </Typography>
            <List>
              <ListItem>
                <ListItemText
                  primary="操作系统"
                  secondary={game.systemRequirements.minimum.os}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="处理器"
                  secondary={game.systemRequirements.minimum.processor}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="内存"
                  secondary={game.systemRequirements.minimum.memory}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="显卡"
                  secondary={game.systemRequirements.minimum.graphics}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="存储空间"
                  secondary={game.systemRequirements.minimum.storage}
                />
              </ListItem>
            </List>
          </Paper>
        </Grid>
        <Grid item xs={12} md={6}>
          <Paper sx={{ p: 2 }}>
            <Typography variant="h6" gutterBottom>
              推荐配置
            </Typography>
            <List>
              <ListItem>
                <ListItemText
                  primary="操作系统"
                  secondary={game.systemRequirements.recommended.os}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="处理器"
                  secondary={game.systemRequirements.recommended.processor}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="内存"
                  secondary={game.systemRequirements.recommended.memory}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="显卡"
                  secondary={game.systemRequirements.recommended.graphics}
                />
              </ListItem>
              <ListItem>
                <ListItemText
                  primary="存储空间"
                  secondary={game.systemRequirements.recommended.storage}
                />
              </ListItem>
            </List>
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
};

export default GameOverview;
